const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack')

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'main.js',
      assetModuleFilename: 'assets/[hash][ext][query]'
    },
    module: {
     rules: [
        {
          test: /\.jsx?$/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ["@babel/preset-env","@babel/preset-react"],
              plugins: [
                ["@babel/plugin-proposal-decorators", { legacy: true }],
                ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
                ["@babel/plugin-proposal-private-methods", { "loose": true }],
                ["@babel/plugin-proposal-class-properties", { loose: true }],
              ],
            }
          }
        },
        // 最右侧的loader读的是源文件的内容，最左侧的loader一定会返回一个js模块
        { test: /\.css$/, use: ['style-loader','css-loader', 'postcss-loader']},
        { test: /\.less$/, use: ['style-loader','css-loader', 'postcss-loader','less-loader']},
        { test: /\.scss$/, use: ['style-loader','css-loader', 'postcss-loader','sass-loader']},
        // 会把png图片自动拷贝到输出目录，并返回新的路径或者说名称

        { 
          // use: ["file-loader"],
          test: /\.png$/, 
          type: 'asset/resource'
        },
        { 
          // use: ["file-loader"],
          test: /\.jpg$/, 
          type: 'asset',
          parser: {
            dataUrlCondition: {
              maxSize: 4 * 1024 // 如果文件大小小于4k，就走inline
            }
          }
        },
        { 
          // use: ["file-loader"],
          test: /\.ico$/, 
          type: 'asset/inline'
        },
        { 
          // use: ["file-loader"],
          test: /\.txt$/, 
          type: 'asset/inline'
        }
      ]
    },
    devServer: {
      port: 8080,
      open: true,
      static: path.resolve(__dirname, 'publick')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}